<%--
  Created by IntelliJ IDEA.
  User: haojianlei
  Date: 2018-11-23
  Time: 13:47
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> - 查看邮件</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="favicon.ico">
    <link href="${pageContext.request.contextPath}/assets/shipui/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/shipui/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/shipui/css/animate.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/shipui/css/style.css?v=4.1.0" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/ship/ship.css" rel="stylesheet" >
    <link href="${pageContext.request.contextPath}/assets/shipui/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">


</head>

<body class="gray-bg">
<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-content mailbox-content">
                    <div class="file-manager" style="font-size: 14px;margin-left: 15px">

                        <ul class="folder-list m-b-md" style="padding: 0px">
                            <li>
                                <a href="toSystemHome.do"> <i class="fa fa-circle text-navy" style="color: #cad6f0"></i>企业信息</a>
                            </li>
                            <li>
                                <a href="toPersonalInfo.do"> <i class="fa fa-circle text-navy" style="color: #cad6f0;"></i>个人信息</a>
                            </li>
                            <li>
                                <a href="toStaffInfo.do"> <i class="fa fa-circle text-navy" style="color: #cad6f0"></i>员工管理</a>
                            </li>
                        </ul>

                        <ul class="folder-list m-b-md" style="padding: 0">
                            <li>
                                <a href="toGoodName.do"> <i class="fa fa-circle text-info" style="color: #f5e7d1"></i>货种名称配置</a>
                            </li>
                            <li>
                                <a href="toGooderName.do"> <i class="fa fa-circle text-info" style="color: #f5e7d1"></i>货主名称配置</a>
                            </li>
                            <li>
                                <a href="toLogistics.do"> <i class="fa fa-circle text-info" style="color: #f5e7d1"></i>港口名称配置</a>
                            </li>
                        </ul>

                        <ul class="folder-list m-b-md" style="padding: 0">
                            <li>
                                <a href="toRecharge.do"  style="color: #0d8ddb;font-weight: 700"><i class="fa fa-circle text-info" style="color: #0d8ddb"></i>账户充值</a>
                            </li>
                            <li>
                                <a href="toRechargeDetail.do"><i class="fa fa-circle text-info" style="color: #f0cad8"></i>充值记录</a>
                            </li>
                            <li>
                                <a href="toExpensesDetail.do"><i class="fa fa-circle text-info" style="color: #f0cad8"></i>消费记录</a>
                            </li>
                            <li>
                                <a href="toFindShipDetail.do"><i class="fa fa-circle text-info" style="color: #f0cad8"></i>找船记录</a>
                            </li>
                        </ul>

                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-9 animated fadeInRight">

            <div class="mail-box">

                <div class="mail-body">
                    <div class="row">
                        <div class="col-sm-6"> <h3>账户充值：</h3></div>
                        <div class="col-sm-6" style="margin-right: 15px"><span>当前账户余额：<span style="color: red; font-weight: 700">¥</span><span style="color: red; font-weight: 700" id="leftAmount"></span></span></div>
                    </div>

                    <hr class="simple" color="#6f5499" />

                    <div class="row" style="padding: 15px">
                        <div class="go-deposit-box2">
                            <h5 class="go-deposit-title">①充值金额</h5>
                            <div class="number-inout">
                                <input type="radio" name="payfee" id="pay_fee1" checked="checked" style="display:none"/><label class="pay-fee pay_fee1 pay-fee-click"><i class="check-active2"></i></label>
                                <input type="radio" name="payfee" id="pay_fee5" style="display:none"/><label class="pay-fee pay_fee5"><i class="check-active2"></i></label>
                                <input type="radio" name="payfee" id="pay_fee20" style="display:none"/><label class="pay-fee pay_fee20"><i class="check-active2"></i></label>
                                <input type="radio" name="payfee" id="pay_fee30"  style="display:none"/><label class="pay-fee pay_fee30"><i class="check-active2"></i></label>

                            </div>

                            <div class="number-inout">
                                <input type="radio" name="payfee" id="pay_fee50"  style="display:none"/><label class="pay-fee pay_fee50"><i class="check-active2"></i></label>
                                <input type="radio" name="payfee" id="pay_fee100"  style="display:none"/><label class="pay-fee pay_fee100"><i class="check-active2"></i></label>
                            </div>

                            <div class="number-inout">
                                                <span class="number-inout-box">
                                                    <input class="dethr-inp" type="text" value="1" placeholder="自定义"><p style="margin-top: 8px;margin-left: 5px">元</p>
                                                </span>
                            </div>

                        </div>
                        <div class="go-deposit-box">
                            <h5 class="go-deposit-title">②选择支付方式</h5>
                            <p class="go-deposit-number">

                                <input type="radio" id="wxpay" name="payment"  checked="checked" style="display:none"/><label class="pay-left wechat-pay pay-left-click" for="wxpay"><i class="check-active"></i></label>
                                <%--<input type="radio" id="alipay" name="payment" style="display:none"/><label class="pay-left geld-pay pay-left-click" for="alipay"><i class="check-active"></i></label>--%>

                            </p>
                            <div class="go-deposit-submit" style="text-align: left">
                                <div class="go-deposit-btn" type="button" id="payBtn" value="提交" onclick="topay()"/>提交订单</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
</div>

<div class="modal inmodal fade" id="qrcodeModel" tabindex="-1" role="dialog"  aria-hidden="true"  style="overflow: auto" data-backdrop="static">
    <div class="modal-dialog"  style="width:50%;">
        <div class="modal-content" style="text-align: center;">
            <div class="modal-body" style="height: 400px">
                <input type="hidden" id="ordernumber">
                <div class="row" style="text-align: center">
                   <h1 style="color: #1890ff;font-weight: 700">打开微信扫码支付</h1>
                </div>
                <div class="row" style="margin-top: 30px">
                    <div id="qrcode" style="margin-left: 35%"></div>
                </div>

                <div class="row" style="margin-top: 30px">
                    <button class="btn btn-primary btn-outline" onclick="wechatPayBack()">返回</button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 全局js -->
<script src="${pageContext.request.contextPath}/assets/shipui/js/jquery.min.js?v=2.1.4"></script>
<script src="${pageContext.request.contextPath}/assets/shipui/js/qrcode.js"></script>
<script src="${pageContext.request.contextPath}/assets/shipui/js/bootstrap.min.js?v=3.3.6"></script>
<script src="${pageContext.request.contextPath}/assets/shipui/js/plugins/sweetalert/sweetalert.min.js"></script>

<!-- 自定义js -->
<script src="${pageContext.request.contextPath}/assets/shipui/js/content.js?v=1.0.0"></script>
<script type="text/javascript">

    $(function(){
        $(".pay-left").click(function(){
            $(".pay-left").removeClass("pay-left-click");
            $(this).addClass("pay-left-click");
        })

        $(".pay_fee1").click(function(){
            $(".pay-fee").removeClass("pay-fee-click");
            $(this).addClass("pay-fee-click");
            $(".dethr-inp").val('1');
        })

        $(".pay_fee5").click(function(){
            $(".pay-fee").removeClass("pay-fee-click");
            $(this).addClass("pay-fee-click");
            $(".dethr-inp").val('5');
        })
        $(".pay_fee20").click(function(){
            $(".pay-fee").removeClass("pay-fee-click");
            $(this).addClass("pay-fee-click");
            $(".dethr-inp").val('20');
        })
        $(".pay_fee30").click(function(){
            $(".pay-fee").removeClass("pay-fee-click");
            $(this).addClass("pay-fee-click");
            $(".dethr-inp").val('30');
        })
        $(".pay_fee50").click(function(){
            $(".pay-fee").removeClass("pay-fee-click");
            $(this).addClass("pay-fee-click");
            $(".dethr-inp").val('50');
        })
        $(".pay_fee100").click(function(){
            $(".pay-fee").removeClass("pay-fee-click");
            $(this).addClass("pay-fee-click");
            $(".dethr-inp").val('100');
        })



        $(".dethr-inp").click(function(){
            $(".pay-fee").removeClass("pay-fee-click");
        })

        //	限定输入必须为数字
        $(".dethr-inp").keypress(function(b) {
            var keyCode = b.keyCode ? b.keyCode : b.charCode;
            if (keyCode != 0 && (keyCode < 48 || keyCode > 57) && keyCode != 8 && keyCode != 37 && keyCode != 39)
            {return false;
            }
            else {
                return true;
            }
        }).keyup(function(e) {
            var keyCode = e.keyCode ? e.keyCode : e.charCode;
            // console.log(keyCode);
            if (keyCode != 8) {
                var numVal = parseInt($(".dethr-inp").val()) || 0;
                numVal = numVal < 1 ? 1 : numVal;
                $(".dethr-inp").val(numVal);
            }
        }).blur(function() {
            var numVal = parseInt($(".dethr-inp").val()) || 0;
            numVal = numVal < 1 ? 1 : numVal;
            $(".dethr-inp").val(numVal);
        });

    })

    $(function () {
        $.post("pay/selectLeftAmount.do",function (data) {
            if (data.SUCCESS ==true){
                $("#leftAmount").text(data.leftAmount);
            }
        });
    })

    function topay() {
        $.post("pay/toWXPay.do",JSON.stringify({ money:$(".dethr-inp").val() }),function (res) {
            if (res.SUCCESS ==true){
                makeCode (res.code_url);
                //$("#ordernumber").val("wx20181207090948701-1");
                $("#qrcodeModel").modal("show");
                var data={
                    out_trade_no:res.out_trade_no
                }
                checkstatus(data);
            }else{
                alert(res.MSG);
            }
        });
    }
    function makeCode (code_url) {
        var qrcode = new QRCode(document.getElementById("qrcode"), {
            width : 200,
            height : 200
        });
        qrcode.makeCode(code_url);
    }


    function checkstatus(data) {
        $.ajax({
            type:'post',
            url:'pay/selectWxOrder.do',
            dataType : 'json',
            data:JSON.stringify(data),
            contentType: "application/json; charset=utf-8",
            async : false,
            success:  function(res) {
                if(res.trade_state == "SUCCESS"){
                    $("#qrcodeModel").modal('hide');
                    swal({
                        title: "充值成功！",
                        text:"您可以去使用功能了！",
                        type: "success"
                    }, function () {
                        window.location.href="toRecharge.do";
                    });
                }else {
                    setTimeout(function() {
                        checkstatus(data)
                    },1000)
                }
            },
            error  :  function(XMLHttpRequest, textStatus, errorThrown) {
                alert('error');
            }
        });
    }

    function wechatPayBack() {
        $("#qrcodeModel").modal('hide');
        window.location.href="toRecharge.do";
    }

</script>

</body>

</html>
